<!--搜索组件 -->
<template>
  <div>
    <div class="image">
      <img src="@/assets/img.jpg" class="img" />
    </div>
    <div class="top-box">
      <div class="typewriter">
        <vue-typer
          :text="['星不曾灭', '灭的是阑珊灯火']"
          :repeat="Infinity"
          :shuffle="true"
          initial-action="erasing"
          :pre-type-delay="70"
          :type-delay="70"
          :pre-erase-delay="2000"
          :erase-delay="250"
          erase-style="backspace"
          :erase-on-complete="false"
          caret-animation="smooth"
        ></vue-typer>
      </div>

      <div class="searchbox">
        <el-select v-model="select" size="small">
          <el-option label="百度" value="百度"></el-option>
          <el-option label="必应" value="必应"></el-option>
        </el-select>
        <el-input
          placeholder="在互联网中搜索"
          v-model.trim="input"
          class="input-with-select"
          clearable
          size="small"
          @change="urlJumpFn"
        >
        </el-input>
        <el-button
          type="success"
          icon="el-icon-search"
          size="small"
          @click="urlJumpFn"
        ></el-button>
      </div>
    </div>
    <div class="but"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      select: '百度'
    }
  },
  methods: {
    urlJumpFn() {
      if (this.input.length === 0) return
      if (this.select === '百度') {
        window.location.href =
          'https://www.baidu.com/s?ie=UTF-8&wd=' + this.input
      } else if (this.select === '必应') {
        window.location.href = 'https://cn.bing.com/search?q=' + this.input
      }
    }
  }
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: font;
  src: url(@/font/ZiTiQuanXinYiGuanHeiTi4.0-2.ttf);
}
.image {
  height: 70vh;
  width: 100%;
}
.img {
  height: 70vh;
  width: 100%;
  object-fit: cover;
}
.top-box {
  height: 70vh;
  width: 100%;

  z-index: 22;
  position: absolute;
  top: 0;
}
.top-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.vue-typer {
  font-size: 30px;
  color: #fff;
}
/deep/.vue-typer .custom.char.typed {
  color: #fbda41;
  font-family: 'font';
}
.searchbox {
  margin-top: 40px;
  display: flex;
}
.el-select {
  width: 5vw;
  margin-right: 10px;
}
.el-input {
  width: 30vw;
}
.el-button {
  margin-left: 10px;
}
.mask {
  filter: blur(2px);
  z-index: -22;
}
.but {
  background-color: #fff;
}
</style>
